<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <van-icon name="arrow-left" color="gray" @click="Onback" />
      </template>
      <!-- 顶部导航条 -->
    </van-nav-bar>
    <!-- Swiper轮播 -->
    <div class="BOx"></div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in DetailsIMG" :key="index">
        <img :src="item.pic" alt="" class="Details_img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 渲染商品 -->
    <div class="DetaText">{{ DetaTitle.name }}</div>
    <div class="DetaTitle">
      <span class="Deta_SP">低价￥{{ DetaTitle.minPrice }}</span>
      <span class="Deta_SPP">原价{{ DetaTitle.originalPrice }}</span>
      <span class="Deta_Sppp">库存{{ DetaTitle.stores }}</span>
    </div>
    <div class="Details_box"></div>
    <!-- 渲染商品介绍 -->
    <div v-html="DetaTitle.content" class="bb"></div>
    <!-- 底部购物车Tabber -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="Ongo" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="danger" text="立即购买" @click="Show" />
    </van-goods-action>
    <!-- 弹出框 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="DetaCart">
        <div
          v-for="(item, index) in DetailsIMG"
          :key="index + 'a'"
          class="DetaCartimg"
        >
          <img :src="item.pic" alt="" />
        </div>
        <div class="DetaCartTitle">
          <p>{{ DetaTitle.name }}</p>
          <span class="Deta_SP">低价￥{{ DetaTitle.minPrice }}</span>
        </div>
      </div>
      <div v-for="(item, index) in DetaCartTitle" :key="index + 'b'">
        <p class="DetaCartTitle_P">{{ item.name }}</p>
      </div>
      <div v-for="(item, index) in DetaCartIndex" :key="index">
        <div class="DetaCartIndex_Div">
          {{ item.name }}
        </div>
      </div>
      <div class="DetaCart_width">
        <div>购买数量</div>
        <div class="DetaCart_right"><van-stepper v-model="value" /></div>
      </div>
      <div class="DetaCart_footer" @click="Onclick(DetaTitle)">
        立即加入购物车
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      DetailsIMG: [],
      Details: [],
      DetaTitle: [],
      show: false, //弹出框状态
      DetaCart: [],
      DetaCartTitle:[],
      DetaCartIndex:[],
      value:1, //步进器
    };
  },
  created() {
    let id = this.$route.query.id;
    console.log(id);
    this.$Api
      .YanxuanListItem({
        params: {
          id: id,
        },
      })
      .then((res) => {
        this.Details = res.data.data.content;
        this.DetailsIMG = res.data.data.pics;
        this.DetaTitle = res.data.data.basicInfo;
        this.DetaCart = res.data.data.properties;
        this.DetaCartTitle = res.data.data.properties
        this.DetaCartIndex = res.data.data.properties[0].childsCurGoods
      });
  },
  methods: {
    Onback() {
      this.$router.go(-1);
    },
   
    Show() {
      this.show = true;
    },
    Onclick(item){
      console.log(item)
      this.$store.dispatch('getCart',item)
     
       this.$notify({
             type: 'success', message: '加入成功' 
             
       });
                     

    },
    Ongo(){
      this.$router.push({
        path:"/cart"
      })
    }
  },
};
</script>
<style scoped>
.Details_img {
  width: 100%;
  height: 20rem;
}
.bb >>> img {
  width: 100% !important;
  height: 100% !important;
}
.bb {
  font-size: 0.9rem;
}
.DetaText {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 100;
}
.DetaTitle {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.Deta_SP {
  color: red;
}
.Deta_SPP {
  color: gray;
  font-size: 0.9rem;
}
.Deta_Sppp {
  float: right;
  font-size: 0.8rem;
  color: gainsboro;
}
.Details_box {
  width: 100%;
  height: 1rem;
  background: rgb(240, 236, 236);
}
.BOx {
  width: 100%;
  height: 3rem;
}
.DetaCartimg {
  width: 50%;
  height: 5rem;
}
.DetaCartimg img {
  width: 50%;
  margin-left: 5%;
  margin-top: 5%;
  height: 5rem;
}

.DetaCart {
  width: 100%;
  height: 7rem;
  display: flex;
  border-bottom: 0.05rem solid gainsboro;
}
.DetaCartTitle {
  width: 48%;
  height: 7rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  margin-right: 1rem;
}
.DetaCartTitle_P {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.DetaCartIndex_Div {
  width: 5rem;
  height: 2rem;
  border: 1px solid gainsboro;
  font-size: 0.7rem;
  float: left;
  margin-top: 1rem;
  margin-left: 2rem;
  line-height: 2rem;
  text-align: center;
}
.DetaCart_width {
  width: 100%;
  height: 1.5rem;
  margin-top: 3.5rem;
  display: flex;
}
.DetaCart_right {
  margin-left: 13rem;
}
.DetaCart_footer {
  width: 100%;
  height: 2rem;
  text-align: center;
  margin-top: 1rem;
  line-height: 2rem;
  background: rgb(183, 40, 46);
  color: #fff;
}
</style>